<template>
  <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/AdmSystem/AdmList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查看商家</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="活跃商家">
        <el-table
          :data="admStoresData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="390px"
        >
          <el-table-column label="商家序号" prop="_id"></el-table-column>
          <el-table-column label="商家名字" prop="username"></el-table-column>
          <el-table-column label="营业状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="name"></el-table-column>
          <el-table-column label="商家照片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>

          <el-table-column align="right">
            <template slot="header" slot-scope>
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="hideStoresAsync(scope.row)">冻结商家</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="冻结商家">
          <el-table
          :data="freezeStoresData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())|| data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
           height="390px"
        >
          <el-table-column label="商家序号" prop="_id"></el-table-column>
          <el-table-column label="商家名字" prop="username"></el-table-column>
          <el-table-column label="营业状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="name"></el-table-column>
          <el-table-column label="商家照片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>

          <el-table-column align="right">
            <template slot="header" slot-scope>
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="hideStoresAsync(scope.row)">恢复运营</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "admstores"
);
export default {
  data() {
    return {
      search: ""
    };
  },
  computed: {
    ...mapState(["admStoresData",'freezeStoresData'])
  },
  created() {
    this.getStoresAsync();
    this.freezeStoresAsync()
  },
  methods: {
    ...mapActions(["getStoresAsync",'hideStoresAsync','freezeStoresAsync'])
  }
};
</script>

<style>

.el-tabs__nav-scroll {
  line-height: 40px;
}
.el-tabs__nav-scroll div {
  height: 100%;
}
img {
  height: 50px;
  width: 50px;
}
.el-table{
  line-height: 35px;
}
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}

#box {
  height: 200px;
  width: 420px;
}
#box ul {
  float: left;
}
#box li {
  height: 25px;
  width: 200px;
  list-style: none;
}
</style>